专为终端同学打造的超轻量跨端框架

小编推荐：Hummer（原名NativeJS）项目是由R-Lab泛前端团队发起，我们普惠泛前端团队参与共建的高性能高可用的轻量级动态化跨端框架。历时一年多的打磨，目前已经在聚合收银台、代驾跑腿、596等业务上进行了大规模落地，同时在代驾司机端和两轮车业务的部分场景上进行尝试。

1.

业务背景

聚合收银作为Hummer最早落地的线上业务场景，早在2018年就随着国内收银类业务的发展，以及国际化业务的持续开城，遇到了非常大的挑战。

• 最小规模的技术团队。收银钱包小组团队由两位全职同学和两位兼职同学组成。

• 大量的业务需求和定制诉求。我们支撑了所有涉及支付服务的国内和国际业务的发展，大量的业务需求，特别是国际化开城阶段的本地化定制需求，给团队在排期方面造成了非常大的压力。

• 架构各异的独立App及严格的包大小要求。集团内几乎所有涉及支付业务的App，如滴滴乘客端、99Taxi、如黑马独立端、车服独立端、金融独立端、桔子堆（现D-Chat）等，甚至还尝试过外部接入，如雄安公交业务，除此之外，还有非常多的，处于保密中或试验性的App。这些独立端都有着自己定制化的架构设计，以及符合自身业务诉求和团队现状的技术选型，这给收银SDK带来了非常大的适配工作，并且对包体积有着严格的要求；

• 最高级别的稳定性要求。收银服务无论对于哪个业务来说，都是核心流程中最重要的一环，收银服务的故障，将给各业务线造成不可估量的财务损失和舆论风险。所以收银团队一直以稳定性为最高目标，探索着各种技术解决方案，但是受限于终端的发版特性以及版本覆盖延迟等问题，仍旧给团队造成不小的困扰；

  基于上述困境，我们团队急需一款轻量级高可用的动态化跨端解决方案。

2.

Hummer的优势

  正如Hummer的名字一样，既像“蜂鸟”般小巧轻盈，又像“悍马”一样动力强劲。

• 轻量级：当前Hummer整体编译后只有几百KB的大小，能非常便捷地接入到各App中，并大大缓解各App的包体积压力；

• 高可用：团队自研属性，使得我们对于问题的解决和性能的优化，做到了极速响应，造就了当前低于 0.1‰的crash率；

• 跨端性：基于JSEngine的导出机制，提供统一API，抹平平台差异，实现一套js代码跨三端执行；

• 动态化：通过JS引擎的动态执行能力和JS Bundle的远程下发设施，实现了Hummer的动态更新能力；

• 高性能：得利于原生风格的API设计和基于原生的布局和渲染能力，大大减少了跨域通信损耗，使得Hummer发挥出接近原生的性能体验；

• 易上手：足够简单的架构设计，不到4000行的核心代码，以及偏向原生的开发体验，使得客户端同学的上手难度和维护成本都降至最低；

3.

性能优势

谈到技术性框架，总逃不开“相互伤害”的环节。以下是我们针对业内流行的跨端方案做的性能对比分析。

▌场景描述

每个Demo  App中都实现一个包含1000个元素的 ScrollView，并缓慢滑动，分别比较了四个框架的各项性能数据指标。

▌测试设备

设备型号	vivo X27 Pro - V1836A
vivo ROM	Funtouch OS_9 PD1836_A_1.14.2
安卓版本	Android 9.0

▌四个 Demo App 的截图如下

Hummer	Weex	RN	Native

▌四个 Demo App  的各项性能数据指标对比结果如下

• 页面渲染时间

•  CPU占用率

• 内存占用

• 帧率

4.

Hummer的价值

每次谈了技术性建设，都会讨论它的价值所在，而我们认为，世界上可能没有最好的技术方案，只有符合当下业务发展和自身团队现状的技术方案，才是真正最好的技术方案。而找到这个方案，无论是对业务还是团队来说，都是一个非常大的价值点。除此之外，Hummer在业务、技术，以及组织方面，也收获了不小的价值。

代码很简单，写法很像客户端同学的开发习惯，相信这里不需要过多的阐述。与此同时，Hummer 的开源工作正在积极筹备中，敬请期待...

5.

架构设计

Hummer 整体的架构设计，和业界其他基于JS引擎的跨端框架基本一致。利用JS引擎（Android端用的是QuickJS，iOS端用的是JavaScriptCore），作为JS和客户端之间的桥梁，JS代码通过JS引擎调用到原生的组件和方法，同时利用Flex布局引擎来渲染页面。

Hummer 通过 Hummer Core把两大引擎联系在一起，同时对外暴露一套 Hummer API，来给JS侧提供 Hummer 内置的组件和方法调用。从这个架构设计可以看出，我们抛弃了业界其他动态化跨端框架都使用的DSL层和VDOM层，因此不具备前端开发常用的响应式编程的能力，但同时换来的是接近原生开发的体验和性能。当然，如果你是Web前端开发同学，希望使用响应式编程的方式来开发，那么 Hummer 也能胜任，你可以有选择性地使用一套 Hummer DSL 脚手架，使用VUE进行开发，基本和Web端的开发方式一致。

下面是 Hummer 整体的架构设计图：

6.

工程实践

Hummer 目前已在我们团队的多个业务中落地使用，包括聚合收银业务、代驾业务、跑腿和闪送业务、596新业务，等等，其稳定性和性能已得到验证。但同时，在开发过程中，还是存在不少开发体验方面的问题，如多端表现不一致性等，需要后续我们 Hummer 团队不断地去打磨和完善。

7.

总结

Hummer 还是一款相对年轻的动态化跨端框架，虽然还存在一些不足，但已经为团队带来了巨大的价值，在接下去的2020年，我们将继续携手并进，将Hummer打造成一款业内领先的动态化跨端解决方案。

--------- PUHUI TECH ---------

本文作者

-

张丹枫

滴滴 ｜ 资深软件开发工程师

我来自浙江绍兴，Hummer项目负责人，对技术和艺术都有所追求，平时喜欢带着我家狗子爬爬山玩玩水，是一名称职的铲屎官。

-

樊远东

滴滴 ｜ 专家工程师

我来自绍兴上虞，普惠泛前端-业务终端负责人，工作之余我主要负责带娃，跟娃一起重温童年，玩乐高，看动漫，抢零食。自诩为合格的奶爸。

-

唐佳诚

滴滴 ｜ 高级软件开发工程师

我来自古城绍兴，Hummer iOS 侧核心开发，对音乐、法律、赛车都有涉猎，空闲偶尔玩玩主机游戏

编辑 | 谢园

-